<template>
	<uni-section title="流程" type="line">	
		<view style="margin-left: 20rpx;">
			<!-- 必选操作人 -->
			<u--form
			class="from-card"
			labelPosition="top"
			labelWidth="180"
			v-for='(item,index) in process'
			:key="index"
			>
			<view v-if="item.perRequire == true" class="form-card-child">
				<u-form-item :label="item.title+'('+ item.desc +')'">
					
				<!-- <u-form-item :label="item.title+'('+ (item.perList.length > 0 ? item.perList.length+'人依次' + item.title.slice(0, item.title.length-1): '请选择'+item.title )+')'"> -->
					<view v-show="item.switch" class="switch-block" @click="switchSpArr(item.title)">切换{{item.title}}</view>
					<view class="card-plus-t user-t" style="">
						<view class="pers-list">
							<view class="per-list per-all"  v-if="item.perList.length>showLength"
								@click="gotoPage('/components/choose-user/addMore?type='+item.title+'&chooseUsers='+encodeURIComponent(JSON.stringify(item.perList))+'&isMust='+item.perRequire)">
								<view class="pers-pic">
									<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
										<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
									</u-avatar>
								</view>
								<text class="pers-name all-users">查看全部</text>
								<view class="pers-icon">
									<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
								</view>
							</view>
							<view class="per-list" v-for='(it,i) in item.perList.length>showLength?item.perList.slice(-showLength):item.perList' :key='i'>
								<view class="pers-pic">
									<u-avatar
										v-if="it.avatar"
										shape="square"
										size="35"
										:src="it.avatar">
									</u-avatar>
									<u-avatar
										v-else
										:text="it.userName.slice(1)"
										:fontSize="it.userName.length > 2?12:15"
										shape="square"
										size="35"
										bgColor="#0087FC">
									</u-avatar>
									<view class="pers-close" style="" @click="closeUser(i,item.title)">
										<u-icon class="per-close" name="close" color="#ffffff" size="16rpx"
											customStyle="line-height: 20rpx;" bold></u-icon>
									</view>
								</view>
								<view class="image_bottom_text">
									<text class="pers-name">{{it.userName}}</text>
								</view>
								<view class="pers-icon">
									<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
								</view>
							</view>
						</view>
						<view class="card-plus-f plus-style"
							@click="gotoPage('/components/choose-user/choosePer?type='+item.title+'&chooseUsers='+encodeURIComponent(JSON.stringify(item.perList)))">
							<uni-text class="span-style" v-if="item.perRequire==true && item.perList.length<1">
								<span>*</span>
							</uni-text>
							<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
						</view>
					</view>
				</u-form-item>
			</view>
			<view v-else class="form-card-child">
				<u-form-item :label="item.title+'('+ item.desc+')'">
				<!-- <u-form-item :label="item.title+'('+ (item.perList.length > 0 ? item.title.slice(0, item.title.length-1) + item.perList.length+'人' : '请选择'+item.title)+')'"> -->
					<view class="card-plus-t user-t" style="">
						<view class="pers-list">
							<view class="per-list per-all"  v-if="item.perList.length>showLength"
								@click="gotoPage('/components/choose-user/addMore?type='+item.title+'&chooseUsers='+encodeURIComponent(JSON.stringify(item.perList))+'&isMust='+item.perRequire)">
								<view class="pers-pic">
									<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
										<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
									</u-avatar>
								</view>
								<text class="pers-name all-users">查看全部</text>
								<view class="pers-icon">
									<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
								</view>
							</view>
							<view class="per-list" v-for='(it,i) in item.perList.length>showLength?item.perList.slice(-showLength):item.perList' :key='i'>
								<view class="pers-pic">
									<u-avatar
										v-if="it.avatar"
										shape="square"
										size="35"
										:src="it.avatar">
									</u-avatar>
									<u-avatar
										v-else
										:text="it.userName.slice(1)"
										:fontSize="it.userName.length > 2?12:15"
										shape="square"
										size="35"
										bgColor="#0087FC">
									</u-avatar>
									<view class="pers-close" style="" @click="closeUser(i,item.title)">
										<u-icon class="per-close" name="close" color="#ffffff" size="16rpx"
											customStyle="line-height: 20rpx;" bold></u-icon>
									</view>
								</view>
								<view class="image_bottom_text">
									<text class="pers-name">{{it.userName}}</text>
								</view>
								<view class="pers-icon">
									<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
								</view>
							</view> 
						</view>
						<view class="card-plus-f plus-style"
							@click="gotoPage('/components/choose-user/choosePer?type='+item.title+'&chooseUsers='+encodeURIComponent(JSON.stringify(item.perList)))">
							<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
						</view>
					</view>
				</u-form-item>
			</view>
				
			</u--form>
		</view>
	</uni-section>
</template>

<script>
	export default{
		props:{
			// process:[{title:'title',desc:'desc',perList:[],perRequire:false/true},{...}...]
			process:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				showLength: 4,
			}
		},
		mounted() {
			// $on与$emit在同一个vue文件里，可以用来监听chooseuser事件传出的参数值，这是自我捕获
			// this.$on('deleteuser',function(index){
			// 	console.log('这是啥啦index:',index);
			// });
		},
		methods:{
			closeUser(index, title) {
				this.process.forEach(item => {
					if(item.title == title){
						if(item.perList.length > this.showLength){
							item.perList.splice(index+item.perList.length-this.showLength,1)
						}else{
							item.perList.splice(index,1)
						}
						if(item.perRequire==true){
							item.perList.length > 0 ? item.desc = item.perList.length+'人依次' + item.title.slice(0, item.title.length-1): item.desc = '请选择'+item.title
						}else{
							item.perList.length > 0 ? item.desc = item.title.slice(0, item.title.length-1) + item.perList.length+'人' : item.desc = '请选择'+item.title
						}
					}
				})
				this.$emit('deleteuser',this.process);
			},
			switchSpArr(title){
				this.$emit('switchSpUserArr');
			}
		}
	}
</script>

<style>
	/* ::v-deep .form-card-child .u-form-item__body {
			padding: 0 0 10rpx 0;
		} */
</style>
<style>
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	
	}
	.user-t {
		margin: 15rpx 0 0 0;
		height: 120rpx;
	}
	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}
	.per-list {
		margin-right: 50rpx;
	}
	.per-all {
		margin-right: 22rpx;
	}
	.pers-pic {
		height: 65rpx;
	}
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	.all-users {
		left: -10%;
		top : 5rpx;
		position: relative;
	}
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
		width: 26rpx;
	}
	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -78rpx;
		margin-left: 55rpx;
	}
	.per-close{
		flex-direction: column !important;
	}
	.image_bottom_text{
		margin-top: 5rpx;
	}
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;
		height: 40rpx;
		/* height: 15rpx; */
		border-radius: 15rpx;
	}
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	/* 切换按钮颜色 */
	.switch-block {
		background-color: #0081FF;
		color: #f6f6f6;
		width: auto;
		padding: 5rpx 10rpx;
		position: absolute;
		left: 45%;
		top: 20rpx;
		border-radius: 10rpx;
	}
	
	.form-card-child {
		position: relative;
	}
</style>